<template>
  <div style="padding: 24px 0;">
    <router-link style="margin-left: 24px;" :to="{path:'/substitute/substituteApply'}"><a-button>调代课申请</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteApproval'}"><a-button>调代课审批</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteStatistics'}"><a-button>调代课统计</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteTeacherStatistics'}"><a-button>调代课统计（管理员）</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteSetting'}"><a-button>基础设置</a-button></router-link>
    <a-button @click="applyDetailsDialog = true">申请调课详情</a-button>
    <div class="attendance-tit">调代课统计</div>
    <a-modal v-model="applyDetailsDialog" title="申请调课详情" :footer="null" width="1000px">
      <div class="apply-details">
        <div class="apply-details-tit">调代课老师：</div>
        <div class="apply-details-desc">姜九笙</div>
        <div class="apply-details-tit">调代课节数：</div>
        <div class="apply-details-desc">4节</div>
      </div>
      <a-table :columns="applyDetailsColumns" :data-source="applyStatistics"></a-table>
    </a-modal>
    <div class="line"></div>
    <div class="body">
      <a-radio-group v-model="classMode" @change="classModeChange">
        <a-radio-button value="1">我申请的调代课</a-radio-button>
        <a-radio-button value="2">我审批的调代课</a-radio-button>
      </a-radio-group>
      <div class="adjust-class">
        <div class="adjust-class-top">
          <div
            v-for="(item,index) in timeList" :key="index"
            :class="[timeChange == index? 'select-time' : 'no-select-time']"
            @click="timeSelect(index)"
          >
            {{ item }}
          </div>
        </div>
        <div class="search-row">
          <div class="search-input">
            <div class="search-tit">类型：</div>
            <a-select v-model="queryList.substituteType" placeholder="请选择" class="search-desc">
              <a-select-option value="0">
                代课
              </a-select-option>
              <a-select-option value="1">
                调课
              </a-select-option>
            </a-select>
          </div>
          <div v-if ="classMode == 2" class="search-input">
            <a-input-search v-model="queryList.substituteTeacherName" class="search-desc" placeholder="请输入老师姓名" enter-button @search="substituteStatisticsClasses"/>
          </div>
          <a-button>导出数据</a-button>
        </div>
      </div>

      <div class="card">
        <div @click="selectSubstituteType(index)"  v-for="(item,index) in classMode==1? 3:2" :key="index" class="class-card" :style="{'width' : classMode==1? '33%' : '49%'}">
          <div class="class-card-circle">
            <a-icon class="class-card-icon" type="swap" />
          </div>
          <div class="class-card-title">
            <div v-if="index == 0" class="class-card-tit">调课（节）</div>
            <div v-if="index == 1" class="class-card-tit">代课（节）</div>
            <div v-if="index == 2" class="class-card-tit">自修（节）</div>
            <div v-if="index == 0" class="class-card-num">{{ substituteStatisticsClassesData.transferClasses }}</div>
            <div v-if="index == 1" class="class-card-num">{{ substituteStatisticsClassesData.substituteClasses }}</div>
            <div v-if="index == 2" class="class-card-num">{{ substituteStatisticsClassesData.selfClasses }}</div>
          </div>
        </div>
      </div>
      <a-table :columns="columns" :data-source="applyStatistics">
        <span slot="createTime" slot-scope="scope, record">
          <!-- <div>{{ scope.courseDate.split(' ')[0] + '·' + scope.courseWeek }}</div> -->
          <div>{{ record.courseDate.split(' ')[0] + ' ' }} {{ new Map([
            [1, '周一'],
            [2, '周二'],
            [3, '周三'],
            [4, '周四'],
            [6, '周五️'],
            [7, '周六️'],
            [8, '周日️'],
          ]).get(record.courseWeek) }}{{ '第' + record.courseWeek + '节' }}</div>
        </span>
        <span slot="courseName" slot-scope="scope, record">
          <div>{{ record.courseClassName + '·' + record.courseName }}</div>
        </span>
        <span slot="leaveApplyId" slot-scope="scope, record">
          <div v-if="leaveApplyId">教师请假</div>
          <div v-else>申请调代课</div>
        </span>

        <span slot="substituteType" slot-scope="scope, record">
          <div v-if="record.substituteType == 0">代课</div>
          <div v-if="record.substituteType == 1">调课</div>
          <div v-if="record.substituteType == 2">调课（自修）</div>
        </span>
      </a-table>
    </div>
  </div>
</template>
<style scoped="scoped" lang="scss">
  .attendance-tit {
    font-size: 16px;
    color: #333333;
    margin: 24px 0 24px 24px;
  }
  .line {
    height: 1px;
    background: #E5E5E5;
  }
  .body {
    padding: 24px;
    .adjust-class {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 30px 0;
      .adjust-class-top {
        display: flex;
        align-items: center;
        .select-time {
          font-size: 14px;
          font-weight: 400;
          color: #4174FD;
          margin-right: 40px;
          cursor: pointer;
        }
        .no-select-time {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          margin-right: 40px;
          cursor: pointer;
        }
      }
    }
    .search-row {
      display: flex;
      align-items: center;
      .search-input {
        display: flex;
        align-items: center;
        .search-tit {
          font-size: 14px;
          color: #333333;
        }
        .search-desc {
          width: 200px;
          margin-right: 20px;
        }
      }
    }
    .card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      .class-card {
        height: 103px;
        background: #FFFFFF;
        border-radius: 12px;
        border: 1px solid #F2F4FA;
        display: flex;
        justify-content: center;
        align-items: center;
        .class-card-circle {
          width: 55px;
          height: 55px;
          background: linear-gradient(141deg, #76ACFF 0%, #4174FD 100%);
          border-radius: 28px;
          display: flex;
          justify-content: center;
          align-items: center;
          .class-card-icon {
            font-size: 25px;
            background-color: #FFFFFF;
            color: #76ACFF;
            border-radius: 2px;
          }
        }
        .class-card-title {
          text-align: left;
          margin-left: 32px;
          .class-card-tit {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          .class-card-num {
            margin-top: 2px;
            font-size: 24px;
            background: #FFFFFF;
            border-radius: 12px;
          }
        }
      }
    }
  }
  .apply-details {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .apply-details-tit {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .apply-details-desc {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      margin-right: 90px;
    }
  }
</style>
<script>
  const columns = [
    {
      title: '序号',
      customRender: (text,record,index) => `${index+1}`,
    },
    {
      title: '调代课时间',
      dataIndex: 'createTime',
      scopedSlots: { customRender: 'createTime' },
    },
    {
      title: '课程',
      dataIndex: 'courseName',
      scopedSlots: { customRender: 'courseName' },
    },
    {
      title: '调代课来源',
      dataIndex: 'leaveApplyId',
      scopedSlots: { customRender: 'leaveApplyId' },
    },
    {
      title: '类型',
      dataIndex: 'substituteType',
      scopedSlots: { customRender: 'substituteType' },
    },
    {
      title: '对调课程',
      dataIndex: 'substituteCourseName',
    },
    {
      title: '任课老师',
      dataIndex: 'substituteTeacherName',
    },
    {
      title: '原因',
      dataIndex: 'substituteReason',
    },
  ];
  const applyDetailsColumns = [
    {
      title: '申请调课',
      dataIndex: 'groupStatus',
      // scopedSlots: { customRender: 'tdkjs' },
    },
    {
      title: '申请被调课',
      dataIndex: 'groupStatus',
      // scopedSlots: { customRender: 'tdkjs' },
    },
    {
      title: '来源',
      dataIndex: 'groupStatus',
      // scopedSlots: { customRender: 'tdkjs' },
    },
    {
      title: '原因',
      dataIndex: 'groupStatus',
      // scopedSlots: { customRender: 'tdkjs' },
    },
  ]
  import { getApplyStatisticsPage,substituteStatisticsClasses,getApprovePage } from '@/api/apply'
  export default {
    data() {
      return {
        columns,
        applyDetailsColumns,
        classMode: "1",
        timeList: ['全部','今日','本周','本月','本学期','自定义时间'],
        timeChange: 0,
        applyDetailsDialog: false,
        applyStatistics: [],
        queryList: {
          substituteType: undefined,
          queryType: 1,
          substituteTeacherName: undefined
        },
        substituteStatisticsClassesData: {},
      }
    },
    created() {
      this.getList()
      this.substituteStatisticsClasses()
    },
    methods: {
      getList() {
        getApplyStatisticsPage(this.queryList).then(response => {
          this.applyStatistics = response.data.records
        })
        .catch(() => {

        })
      },
      substituteStatisticsClasses() {
        substituteStatisticsClasses(this.queryList).then(response => {
          this.substituteStatisticsClassesData = response.data
        })
        .catch(() => {

        })
      },
      getApprovePage() {
        getApprovePage().then(response => {
          this.applyStatistics = response.data.records
        })
        .catch(() => {

        })
      },
      selectSubstituteType(index) {
        this.fristSelect = false
        if (index == 0) this.queryList.substituteType = 0
        if (index == 1) this.queryList.substituteType = 1
        if (index == 2) this.queryList.substituteType = 2
        this.getList()
      },
      classModeChange(e) {
        this.queryList.queryType = parseInt(e.target.value)
        if ( e.target.value == "2") {
          this.getApprovePage()
        } else {
          this.getList()
        }
        this.substituteStatisticsClasses()
      },
      timeSelect(index) {
        this.timeChange = index
      }
    },
  }
</script>
